import React, { useState, useEffect } from 'react'
import { Select, Input, Button, Form, Modal, DatePicker, Radio } from 'antd'
import api from '../../../api/activityManage'
import moment from 'moment';

const { TextArea } = Input;
const { Option } = Select
const { RangePicker } = DatePicker;

const EditActivityModal = ({editModal,showModal,getList,form}) => {
    const [state, setState] = useState({
		actTypeArr:[//活动类型数组
			{id:'1',name:'积分活动'}
		],
		btnLoading:false,//按钮loading
	});

    //更新state
    const updateState = (newState) => {
        let data = JSON.parse(JSON.stringify(state))
        setState(Object.assign({}, data, newState))
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        form.validateFields((err, values) => {
            if (!err) {
				updateState({btnLoading:true})
				let obj = JSON.parse(JSON.stringify(values))
				obj.beginTime = moment(values.actDate[0]).format('YYYY-MM-DD HH:mm:ss')
				obj.endTime = moment(values.actDate[1]).format('YYYY-MM-DD HH:mm:ss')
				delete obj.actDate
				let type = ''
				if(editModal.title.indexOf('编辑')>=0){
					type = 'editActivities'
					obj.id = editModal.data.id
				}else{
					type = 'addActivities'
				}
				//新建或编辑活动
				api[type](obj,(res)=>{
					console.log(res)
					if(res){
						closeModal(4)
					}
					updateState({btnLoading:false})
				})
            }
        });
    }
    //关闭模态框
    const closeModal = (type)=>{
		showModal(type,{})
		form.resetFields()
	}
	const disabledDate =(current)=> {
		// return current && current < moment().endOf('day');
	}
    const { getFieldDecorator } = form;
    return (
            <Modal title={editModal.title}
				visible={editModal.visible}
				width={600}
				footer={null}
				onCancel={()=>{closeModal(3)}}
			>
                <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} onSubmit={handleSubmit}>
					<Form.Item label="活动名称">
						{getFieldDecorator('name', {
							initialValue:editModal.data.name,
							rules: [{ required: true, message: '请输入活动名称' }],
						})(
							<Input placeholder="请输入活动名称" maxLength={30} />,
						)}
					</Form.Item>
					<Form.Item label="活动类型">
						{getFieldDecorator('actType', {
							initialValue:editModal.data.actType,
							rules: [{ required: true, message: '请选择活动类型' }],
						})(
							<Select style={{ width: 200 }} placeholder="活动类型">
								{state.actTypeArr.map((v,i)=>{
									return (
										<Option key={i} value={v.id}>{v.name}</Option>
									)
								})}
							</Select>
						)}
					</Form.Item>
					<Form.Item label="活动时间">
						{getFieldDecorator('actDate', {
							initialValue:editModal.data.beginTime?[moment(editModal.data.beginTime,'YYYY-MM-DD HH:mm:ss'),moment(editModal.data.endTime,'YYYY-MM-DD HH:mm:ss')]:null,
							rules: [{ required: true, message: '请选择活动时间' }],
						})(
							<RangePicker disabledDate={disabledDate} showTime={true} />,
						)}
					</Form.Item>
					<Form.Item label="活动配置">
						{getFieldDecorator('config', {
							initialValue:editModal.data.config,
						})(
							<TextArea rows={4} placeholder="请输入活动配置" />,
						)}
					</Form.Item>
					<Form.Item label="状态">
						{getFieldDecorator('status', {
							initialValue:editModal.data.status,
							rules: [{ required: true, message: '请选择状态' }],
						})(
							<Radio.Group>
								<Radio value={'1'}>有效</Radio>
								<Radio value={'2'}>无效</Radio>
							</Radio.Group>
						)}
					</Form.Item>
					<Form.Item wrapperCol={{ span: 24 }} style={{textAlign:'right'}}>
						<Button onClick={()=>{closeModal(3)}}>取消</Button>
						<Button style={{marginLeft:30}} type="primary" htmlType="submit" loading={state.btnLoading}>保存</Button>
					</Form.Item>
                </Form>
            </Modal>
    )
}

export default Form.create({})(EditActivityModal)